<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="always">
        <div slot="header">
          <!-- 表单头 -->
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="关键字">
              <el-input v-model.trim="formInline.keyword"></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="formInline.state" placeholder="请选择">
                <el-option label="已启用" value="1"></el-option>
                <el-option label="已禁用" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="">
              <el-button @click="reset">清除</el-button>
              <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>
          </el-form>
          <el-button
            style="float: right; margin-top: -60px"
            type="success"
            size="medium"
            @click="addCatalog"
          >
            <i class="el-icon-edit">新增技巧</i>
          </el-button>
        </div>
        <!-- 表格 -->
        <el-col
          :span="24"
          style="background-color: #f4f4f5; padding: 10px; margin-bottom: 20px"
        >
          <i class="el-icon-warning">数据一共{{ total }}条</i>
        </el-col>

        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="index" prop="date" label="序号">
          </el-table-column>
          <el-table-column label="文章标题">
            <template #default="{ row }">
              {{ row.title
              }}<i
                v-if="row.videoURL"
                style="color: blue"
                class="el-icon-film"
                @click="palyVideo(row)"
              ></i>
            </template>
          </el-table-column>
          <el-table-column prop="visits" label="阅读数"> </el-table-column>
          <el-table-column prop="username" label="录入人"> </el-table-column>
          <el-table-column label="录入时间">
            <template #default="{ row }"
              >{{ formatDate(row.addDate) }}
            </template>
          </el-table-column>
          <el-table-column prop="state" label="状态"> </el-table-column>
          <el-table-column prop="address" label="操作">
            <template #default="{ row }">
              <el-button type="text" size="default" @click="preview(row)"
                >预览</el-button
              >
              <el-button type="text" size="default" @click="isNo(row)">{{
                row.state ? "禁用" : "启用"
              }}</el-button>
              <el-button
                type="text"
                size="default"
                @click="edit(row)"
                :disabled="row.state ? true : false"
                >修改</el-button
              >
              <el-button
                type="text"
                size="default"
                @click="del(row)"
                :disabled="row.state ? true : false"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <div class="block" style="float: right">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageData.page"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="pageData.pagesize"
            layout="prev, pager, next, sizes,jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
    <articlesAdd :isShow.sync="isShow"></articlesAdd>
    <articlesPreview :isShow.sync="isPreview"></articlesPreview>
    <!-- 视频弹框 -->
    <div v-if="videoState === true" class="all">
      <i class="el-icon-close" @click="closeV"></i>
      <video :src="videoSrc" class="video" autoplay>
        您的浏览器不支持 video 标签。
      </video>
    </div>
  </div>
</template>

<script>
// 获取目录列表 改变状态 删除
import { list as getList, changeState, remove } from '@/api/hmmm/articles.js'
// 导入dialog组件
import articlesAdd from '../components/articles-add'
import articlesPreview from '../components/articles-preview.vue'
import dayjs from 'dayjs'
export default {
  components: {
    articlesAdd, articlesPreview
  },
  data () {
    return {
      // 视频弹框
      videoSrc: '',
      videoState: false,
      // dialog弹框
      isShow: false,
      // 预览
      isPreview: false,
      // 接口需要
      pageData: {
        page: 1, // 当前页
        pagesize: 10// 每页多少条目
      },
      // 总条目数
      total: 10,
      // 表单数据
      formInline: {
        keyword: '',
        state: ''
      },
      // 列表数据
      tableData: []
    }
  },
  methods: {
    // 视频
    closeV () {
      this.videoState = false
    },
    palyVideo (data) {
      console.log(data)
      this.videoState = true
      this.videoSrc = data.videoURL
    },
    // 格式化数据
    formatDate (value, str = 'YYYY-MM-DD HH:mm:ss') {
      return dayjs(value).format(str)
    },

    // 分页功能 - 改变每页条数
    handleSizeChange (val) {
      this.pageData.pagesize = val
      this.getData()
      this.formInline.keyword = ''
    },
    // 分页功能 - 改变当前页
    handleCurrentChange (val) {
      this.pageData.page = val
      this.getData()
      this.formInline.keyword = ''
    },
    async getData () {
      const { data } = await getList(this.pageData)
      // console.log(data)
      this.tableData = data.items
      this.total = data.counts
    },
    // 是否启用
    async isNo (data) {
      // console.log(data)
      let state = 1
      if (data.state === 1) {
        state = 0
      }
      await changeState({ id: data.id, state })
      this.$message.success('修改成功')
      // 重新渲染数据
      this.getData()
    },
    // 编辑功能
    edit (data) {
      this.isShow = true
      this.$children[1].getDetail(data)
    },
    // 删除功能
    del (data) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove(data)
        // 刷新数据
        this.getData()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 预览
    preview (data) {
      // console.log(data)
      this.isPreview = true
      this.$children[2].getData(data)
    },
    // 提交
    async onSubmit () {
      if (this.formInline.state === '') {
        delete this.formInline.state
      }
      const { data } = await getList({ ...this.pageData, ...this.formInline })
      console.log(data)
      this.tableData = data.items
      this.total = data.counts
      delete this.pageData.subjectID
    },
    // 清空
    reset () {
      this.formInline = {
        tagName: '',
        state: ''
      }
    },
    // 添加功能
    addCatalog () {
      this.isShow = true
    }
  },
  created () {
    this.getData()
  }
}
</script>
<style scoped lang='scss'>
.all {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 99999;
}
.el-icon-close {
  display: block;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  position: absolute;
  left: 50%;
  margin-left: -25px;
  top: 40px;
  font-size: 20px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
}
.video {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 800px;
}
</style>
